<template>
  <tm-scrolly ref="scrollRef" :height="listHeight" :refresher="false" @bottom="onScrollToBottom">
	<view>
		<view class="" v-if="recordList.length > 0">
		<!-- 维修记录 -->
		<uni-card v-for="(item,index) in recordList" :key="index">
			<view class="record" @click="toRecord(`../gird-service/gird-service?repairId=${item.repairId}`)">
				<view class="record-address">
					{{item.elevatorName}}
				</view>
				<view class="record-state">
          <DictTag :dict-value="getDict(DictEnum.IOT_FAULT_TYPE)" :value="item.elevatorFaultVo.faultType"></DictTag>
				</view>
				<view class="record-time">
					确认时间:
					<text>{{item.confirmDate || "暂无"}}</text>
				</view>
			</view>
		</uni-card>
		</view>
	</view>
  </tm-scrolly>
  <view class="" v-if="recordList.length === 0">
    <nullPage></nullPage>
  </view>
</template>

<script>
	import nullPage from '@/components/null.vue'
  import {useWindowInfo} from "@/tmui/tool/useFun/useWindowInfo";
  import {listElevatorRepair} from "@/api/iot/elevatorRepair";
  import {getDict} from "@/utils/dict";
  import {DictEnum} from "@/enums/dictEnum";
	export default {
    computed: {
      DictEnum() {
        return DictEnum
      }
    },
		components:{
			nullPage
		},
		data() {
			return {
				recordList: [],
        listHeight: 1000,
				pageNum: 1,
				getListFlag: true,
			}
		},
		onLoad(e) {
      /**
       * 获取页面高度 减去上面筛选的高度 再减去下面底部的高度 单位px
       * 返回需要转换为rpx
       */
      const windowInfo = useWindowInfo();
      /**
       * h5获取的height是所有元素的height
       * 微信获取的height是不包标题栏的
       * 但是h5的标题高度会在top属性显示  微信为0
       * 使用height - top就是实际页面高度 不用判断环境了
       */
      const windowHeight = windowInfo.height;
      const titleHeight = windowInfo.top;
      // 头部区域高度
      const headHeight = 40;
      // 底部区域高度
      const bottomHeight = 30;
      const bottomSafe = windowInfo.bottomSafe;
      this.listHeight = uni.$tm.u.torpx(
          windowHeight - titleHeight - headHeight - bottomHeight - bottomSafe,
      );
      
			this.elevatorId = e.elevatorId;
			this.getleavtList()
		},
		methods: {
      getDict,
			async getleavtList() {
				const res = await listElevatorRepair({
					elevatorId: this.elevatorId,
					pageNum: this.pageNum,
					pageSize: 10,
				});
				if (res.rows.length < 10) {
					this.getListFlag = false;
				}
				this.recordList.push(...res.rows)
			},
      toRecord(url) {
        uni.navigateTo({
          url: url,
        })
      },
      onScrollToBottom(e) {
        if (this.getListFlag) {
          this.pageNum = this.pageNum + 1;
          this.getleavtList();
        }
      }
		},
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	page {
		background: #EFF2F5;
	}

	view {
		font-size: 28rpx;
		line-height: 1.8;

	}

	.uni-card {
		width: 670rpx;
		/* height: 280rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border: none;
		line-height: 280rpx;
		text-align: left;
	}

	.record {
		font-family: PingFang SC;
		font-weight: 400;
		/* margin: 40rpx 0; */
	}

	.record-address {
		font-size: 30rpx;
		color: #34363D;
		margin-bottom: 30rpx;
	}

	.record-state {
		font-size: 30rpx;
		color: #017EFE;
	}

	.record-time {
		font-size: 24rpx;
		color: #989BA6;
	}

	.record-time text {
		margin-left: 15rpx;
		color: #34363D;
		word-spacing: 15rpx;
		letter-spacing: 1rpx;
	}
</style>
